
#### Table of Contents

1. TypeScript + Node.js + CloudFunction + FireStore
2. Pre Requirement
3. Setup npm repo
4. Install dependencies packages
5. Install dev dependencies packages
6. Update main field at package.json
7. Start writing Code index.ts
8. Create tsconfig.json
9. Ready to Deploy Code
10. Deploy from Local
11. TypeScript deployment with Cloud Function with fireStore
12. Other choice?
13. Conclusion

## TypeScript + Node.js + CloudFunction + FireStore

This blog try to demo how to deploy a `Google Cloud Function` that will interact with `fireStore` NOSQL database, and use `TypeScript` for static typing at development, and instead of use CI/CD pipeline will just use `husky` at local to gard and watch the quality of the code and deploy to the Google cloud locally.

## Pre Requirement

Before we start writing the code, there're few pre requirement are not include in this blog but require the application to run.

- GCP Account/Project - make sure has active GCP account and GCP project setup.
- Firebase Account/Project - Your fireBase should connect with GCP, logged on to the Firebase and find the fireStore.
- Run `gcloud config list` - to make sure your local environment are connect to the correct project.

## Setup npm repo

Now, let's get started, first we'll need to initialize the npm repo by run the following command on your local. This will create `package.json` file with default setting.

```
npm init -y
```

## Install dependencies packages

We'll install following dependencies packages since we'll interact with firebase.

```
npm install --save firebase-admin firebase-functions
```

## Install dev dependencies packages

Install following package during the build time, such as typescript for static typing and eslint for syntax analyzer.

```
npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-google eslint-plugin-import firebase-functions-test
```

## Update `main` field at `package.json`

Update the `package.json` for start file.

```
"main": "dist/index.js",
```

## Start writing Code `index.ts`

let's create a file `index.ts` under root folder, and add following code. These are import some package we'll use later, the `firebase-functions/v2` will use the Google Cloud Function gen2, which will have better performance.

```Javascript
import * as functions from "firebase-functions/v2";
import {initializeApp} from "firebase-admin/app";
import {getFirestore} from "firebase-admin/firestore";
```

Next, we'll initialize the app, and start use the fireStore, so add following code.

```Javascript
initializeApp();

const db = getFirestore();
```

Finally, we'll hook with firebase's `functions` to listen to the request, no inside the `onRequest` will be add our main logic, which either get data from fireStore or some update or delete operations.

```Javascript
exports.main = functions
    .https.onRequest(async (request, response) => {

      console.info('on request');

    });
```

### Create `tsconfig.json`

Since we have our first code is ready, let's create our first `tfconfig.json` to compile the typescript into javascript. We'll also add following command to the `package.json`'s `scripts` section.

Once run the `npm run build`, so our code will start to compile the `index.ts` and create javascript file under the `dist/index.js`.

```
"scripts": {
    "build": "tsc"
}
```

### Ready to Deploy Code

So that's all we need for now, we should be able continue adding code to the typescript file `index.ts`, and able to use the simple typescript build to run the `npm run build` to compile the typescript into the javascript and ready to deploy to the production.

### Deploy from Local

In this blog, we don't have lots developer works on the same repo, when many ppl work on the same repository it'll be better to use CI/CD with git pull request so whenever some one create new pull request to the main branch can start continue integration and deploy the latest code to the correct environment.

So instead we'll add following `gcloud` command to the `scripts` section, when you ready to deploy to the google cloud, we can just run the `npm run deploy`, which will set the gcloud project and deploy cloud function.

```JSON
"scripts": {
    "deploy": "npm run deploy:project && npm run deploy:run",
    "deploy:project": "gcloud config set project set-to-the-correct-project-id",
    "deploy:run": "gcloud functions deploy your-cloud-function-name --trigger-http --region=us-central1 --runtime=nodejs16 --gen2 --allow-unauthenticated --entry-point=main --run-service-account=service-account-can-run-the-cloud-function"
}
```

### TypeScript deployment with Cloud Function with fireStore

That'a all for create typescript for cloud function and interact with fireStore and deploy locally.

### Other choice?

Since we use `fireStore`, which is part of `firebase`, we could use firebase's `firebase-tools` to generate list of files to support typescript, now when use with `firebase` tools, to setup the cloud function, few setting you'll have to follow with firebase's setting.

<strong>set node.js version</strong>

```Json
"engines": {
    "node": "16"
}
```

<strong>set region</strong>

```Javascript
functions.setGlobalOptions({
  region: 'us-west1-a'
});
```

<strong>set gen2</strong>

```Javascript
import * as functions from "firebase-functions/v2";
```

<strong>set function name</strong>

Now, following is how you set the function name, once I don't like is that `exports.main` limit the name can be define, use `glcoud` to define the function name, entry point, or gen2 are much more easlier than the `firebase`'s settings.

```Javascript
exports.main = functions
```

### Conclusion

Use `firebase`'s `firebase-tools` could simply setup typescript for firebase cloud function, and after tried a while use `gcloud` has maximum flexibility compare with `firebase-tools`, it could be improve but at this point I feel just use the `typescript` is much more easier.


This blog show how to setup TypeScript with CloudFunction and Deploy to Google Cloud locally

Use TypeScript with Google CloudFunction and Deploy locally


#### Table of Contents

1. Introduction
2. inline script
3. external script
4. async tag script
5. defer tag script
6. dynamic script with defer
7. inline vs external vs async vs defer
8. Conclusion

### Introduction

This blog is trying to show different way to load the script to the HTML page.

### inline script

Directly add script as inline Javascript, inline script reduce the HTTP requests when using as external script, also inline script parse script and execute immediate by the browser.

There're more scenarios use inline script could lean to lots of issues, in general it'll better to avoid use the inline.

```Javascript
<script>
;(function() {
const x = 100;
})();
</script>
```

### external script

Reference a Javascript file as external script, external script is practical when load huge amount of script file or same script need to load in many pages, there're more benefit such as browser cache or bundle, but in general load lots of javascript file is better to use external file.

Same as inline script, when browser load the external script will parse then execute immediately, which could be a issue if the parse or execution of the external JavaScript cause your page display slow.

```Javascript
<script src="./my-script.js"></script>
```

### async script

_async_ attribute could be one solution to fix the issue external script has, _async_ is a attribute to add to the external script, add _async_ attribute then the script will be executed asynchronously whenever is available.

```Javascript
<script async src="/public/script.js?id=async 2"></script>
```

### defer script

_defer_ is also one solution to fix the external script issue which to avoid execute the script immediately, unlike the _async_ will execute whenever is available, _defer_ will execute before the _DOMContentLoaded_ event.

```Defer
<script defer src="/public/script.js?id=async 2"></script>
```

### dynamic script

Another way to load the script is dynamic load the script and this could be useful depend on the scenarios.

```Javascript
<script>
    console.info('start dynamic script 1')
    var tag = document.createElement('script');
    tag.src = "/public/script.js?id=dynamic script defer 1";
    tag.defer = true;
    document.body.appendChild(tag);
</script>
```

### Compare the difference Script

What if we put all these different way of loading the JavaScript and which will be load first and last? So added following different scenario at the HTML.

```Javascript
<html>
  <head>
    <title>Sample</title>
    <script>
        ;(function(){
            console.info('inline 1')
        })();
    </script>
  </head>
  <body>
    <script defer src="/public/script.js?id=defer 1"></script>
    <p>
        Main HTML
    </p>
    <script defer src="/public/script.js?id=defer 2"></script>
    <script>
        ;(function(){
            console.info('inline 2')
        })();
    </script>
    <script src="/public/script.js?id=script 1"></script>
    <script defer src="/public/script.js?id=defer 3"></script>
    <script async src="/public/script.js?id=async 1"></script>
    <script>
        ;(function(){
            console.info('inline 3')
        })();
    </script>
    <script>
        console.info('start dynamic script 1')
        var tag = document.createElement('script');
        tag.src = "/public/script.js?id=dynamic script defer 1";
        tag.defer = true;
        document.body.appendChild(tag);
    </script>
    <script defer src="/public/script.js?id=defer 4"></script>
    <script async src="/public/script.js?id=async 2"></script>
    <script async src="/public/script.js?id=async 3"></script>
    <script src="/public/script.js?id=script 2"></script>
    <script src="/public/script.js?id=script 3"></script>
    <script src="/public/script.js?id=script 4"></script>
    <script defer src="/public/script.js?id=defer 5"></script>
    <script>
        console.info('start dynamic script 2')
        var tag = document.createElement('script');
        tag.src = "/public/script.js?id=dynamic script defer 2";
        tag.defer = true;
        document.body.appendChild(tag);
    </script>
    <script>0
        ;(function(){
            console.info('inline 4')
        })();
    </script>
    <script defer src="/public/script.js?id=defer 6"></script>
  </body>
</html>
```

![result of different script loading](/images/async-defer-inline-external-script-tag-in-javascript/img1.png)

### Conclusion

As you can see, the inline script and external script are all load first. _async_ script will load whenever possible, that's why you can see it load between external script and _async_ script, _defer_ will load before the _DOMContentLoaded_, which all _defer_ script load at the last.


The difference between async, defer inline and external script tag execution order.

Async Defer Inline or External Script Tag in JavaScript


#### Table of Contents

1. Go to Sentry.io to register
2. Run the Page
3. That's all

This blog shows how to get started with Sentry.io for tracking JavaScript
errors and performance.

Often once you ship your website, you'll continue to add content and features,
which means you'll need to call more APIs to get more data, then your site
will become slower, so you'll add some Cache to make the request faster and
tracking the speed of your page so you'll know if you have improved or
not.

Now, this blog will try to show how to get started to use Sentry.io with
JavaScript at Web Application, however, Sentry.io supports the following
features.

  - Open-source error tracking system support PHP, Node.js, Python, Ruby, C#,
Java, Go, React, Angular, Vue, JavaScript.

  - The pricing can start as free with limited features and can upgrade to the
paid version with more.

## Go to Sentry.io to register

First, go to Sentry.io to create an account, follow the instruction to prepare
the JavaScript SDK. The application used in this sample was using Node.js in
the backend, the frontend has a typescript file
`global.ts,` and we want to add Sentry.io to the UI's JavaScript
code.

```
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
    dsn: "{THIS CODE WILL PROVIDE BY SENTRY.IO}",
    integrations: [new Integrations.BrowserTracing()],
    environment: 'local', // default is 'Production'
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
  });
```

## Run the Page

Once you run the page which has the Sentry.io code, you should start seeing
some data at the sentry.io account. You can modify the environment as above to
set to different environments of the data.

## That's all

Pretty much that's all to get started for setting up the environment for the
Sentry.io, there're lots to setting you can do but this is minimal change you
need to get started.


This blog shows how to get started with Sentry.io for tracking JavaScript errors and performance.

How to Getting Started with Sentry Error Tracking


#### Table of Contents

1. Array.prototype.slice
2. Array.prototype.splice

This blog compares how to use Splice versus using Slice at JavaScript.

## Array.prototype.slice

`slice` will create a new array, and won't modify the origin array.
As you can see, the following example is trying to get the first 2 items to
start from index 0. slice function will return as the result and origin result
didn't change.

```
let x = [1,2,3,4,5];
let z = x.slice(0,2);

console.log(x);
// [1,2,3,4,5]
console.log(z);
// [1,2]
```

## Array.prototype.splice

On the other hand, the `splice` will return the same result but
also will update the origin result.

```
let x = [1,2,3,4,5];
let z = x.splice(0,2);

console.log(x);
// [3,4,5]
console.log(z);
// [1,2]
```


This blog compares how to use Splice versus using Slice at JavaScript.

Javascript Splice vs Slice


#### Table of Contents

1. Array.prototype.push
2. Array.prototype.pop
3. Array.prototype.shift
4. Array.prototype.unshift
5. Conclusion

This blog show difference between the JavaScript Array's method push, pop,
shift and unshift usage.

## Array.prototype.push

Array's push probably is the most commonly used method if you want to add the
item to the array,  it will add the new item to the existing array's last
item and return the new length. Following the code, you can see that the
return is the total length and the existing array had been updated.

```
let x = [1,2,3,4,5];
 let y = x.push(100);

console.log(x)
//  [ 1, 2, 3, 4, 5, 100 ]
console.log(y)
// 6
```

Use spread syntax (...), the push method support spread syntax, so you can add
as this way.

```
let x = [1,2,3,4,5];
 x.push(100, 200);

console.log(x);
// [1,2,3,4,5,100,200]
```

Or, if you want to variable is an array and want to use the push and is the
same result as above.

```
let x = [1,2,3,4,5];
 x.push(...[100, 200])

console.log(x);
// [1,2,3,4,5,100,200]
```

push is adding to the existing array, but what if I want to add to the new
array and keep the existing array no update?

One way is you can use `concat` as below. You can see the origin x
is not updated, but the result `concat` return is the new
array.

```
let x = [1,2,3,4,5];
 let y = x.concat(100);
 let z = x.concat(...[200,300]);

console.log(x);
// [1,2,3,4,5]
console.log(y);
// [1,2,3,4,5,100]
console.log(z);
//[1,2,3,4,5,200,300]
```

## Array.prototype.pop

Pop will remove the last item from the array and return the removed
item.

```
let x = [1,2,3,4,5];
let y = x.pop();

console.log(x);
// [1,2,3,4]
console.log(y);
// 5
```

Now, you might want to ask the same question, what if I want to remove the
last item but I want to keep the original array and new array. If you need to
do that, the following is one way, you can create a new array by using
`slice()`.

```
let x = [1,2,3,4,5];
let z = x.slice();
let y = x.pop();

console.log(x);
// [1,2,3,4]
console.log(y);
// 5
console.log(z);
// [1,2,3,4,5]
```

## Array.prototype.shift

Pop is removed from the last item from the Array, the shift is the opposite,
it will be the first item from the array.

```
let x = [1,2,3,4,5];
let z = x.shift()

console.log(x);
// [2,3,4,5]
console.log(z);
// 1
```

## Array.prototype.unshift

unshift from the array will add list of value to the beginning of the origin
array and return the total length of the origin array.

```
let x = [1,2,3,4,5];
let z = x.unshift(100, 200)

console.log(x);
// [100,200,1,2,3,4,5]
console.log(z);
// 7
```

### Conclusion

Now, above are difference of how to use JavaScript's array function, push,
pop, shift, unshift.


This blog show difference between the JavaScript Array's method push, pop, shift and unshift usage.

Javascript Push Pop Shift and Unshift


## Table of Contents

1. [Introduction](#introduction)
2. [Recommended Reading](#recommended-reading)
3. [The Bad Parts of JavaScript](#the-bad-parts-of-javascript)
4. [Understanding the `this` Keyword](#understanding-the-this-keyword)
5. [Scope and Hoisting](#scope-and-hoisting)
6. [Common JavaScript Pitfalls](#common-javascript-pitfalls)
7. [Type Coercion and Falsy Values](#type-coercion-and-falsy-values)
8. [Objects and Prototypes](#objects-and-prototypes)
9. [Functions: Statements vs Expressions](#functions-statements-vs-expressions)
10. [Best Practices](#best-practices)

## Introduction

ECMAScript 5 (ES5) introduced many improvements to JavaScript, but the language still retains some problematic features from its earlier versions. Understanding these quirks is essential for writing robust, maintainable code.

This memo covers the "bad" and "awful" parts of JavaScript as identified by Douglas Crockford, along with practical guidance on how to avoid common pitfalls.

## Recommended Reading

Essential resources for understanding JavaScript deeply:

- [Awful Parts: Appendix A - JavaScript: The Good Parts](http://archive.oreilly.com/pub/a/javascript/excerpts/javascript-good-parts/awful-parts.html)
- [Bad Parts: Appendix B - JavaScript: The Good Parts](http://archive.oreilly.com/pub/a/javascript/excerpts/javascript-good-parts/bad-parts.html)

## The Bad Parts of JavaScript

These features should be avoided or used with extreme caution:

### `with` Statement

The `with` statement was intended to provide shorthand for accessing object properties but creates ambiguity and performance issues.

```javascript
// Avoid this
with (obj) {
  a = b; // Is 'a' a property of obj or a global variable?
}

// Do this instead
obj.a = obj.b;
```

### `eval()` Function

`eval()` executes arbitrary strings as code, creating security vulnerabilities and performance problems.

```javascript
// Never do this
eval('var x = ' + userInput);

// Use JSON.parse for data
var data = JSON.parse(jsonString);
```

### `void` Operator

The `void` operator is confusing and rarely needed. It evaluates an expression and returns `undefined`.

```javascript
// Confusing
void 0; // returns undefined

// Clearer alternative
undefined;
```

### Type Coercion

JavaScript's implicit type conversion leads to unexpected behavior:

```javascript
// Surprising results
'5' + 3; // "53" (string concatenation)
'5' - 3; // 2 (numeric subtraction)
[] + {}; // "[object Object]"
{
}
+[]; // 0

// Use explicit conversion
Number('5') + 3; // 8
String(5) + '3'; // "53"
```

### `continue` and `switch` Fall-through

Both can create confusing control flow:

```javascript
// Always use break in switch
switch (value) {
  case 1:
    doSomething();
    break; // Don't forget this!
  case 2:
    doSomethingElse();
    break;
  default:
    doDefault();
}
```

## Understanding the `this` Keyword

The value of `this` in JavaScript depends on how a function is called. This is one of the most confusing aspects of the language.

### Method Invocation

When called as an object method, `this` refers to the object:

```javascript
var obj = {
  name: 'Object',
  getName: function () {
    return this.name; // 'this' is obj
  },
};

obj.getName(); // "Object"
```

### Using `call()` and `apply()`

Explicitly set `this` using `call()` or `apply()`:

```javascript
function greet(greeting) {
  return greeting + ', ' + this.name;
}

var person = { name: 'Alice' };

// Using call (arguments listed)
greet.call(person, 'Hello'); // "Hello, Alice"

// Using apply (arguments as array)
greet.apply(person, ['Hi']); // "Hi, Alice"
```

### Constructor Invocation with `new`

When using `new`, `this` refers to the newly created object:

```javascript
function Person(name) {
  this.name = name; // 'this' is the new instance
}

var alice = new Person('Alice');
console.log(alice.name); // "Alice"
```

### Arrow Functions (ES6+)

Arrow functions inherit `this` from their enclosing scope:

```javascript
var obj = {
  name: 'Object',
  delayedGreet: function () {
    // Arrow function preserves 'this'
    setTimeout(() => {
      console.log(this.name); // "Object"
    }, 100);
  },
};
```

## Scope and Hoisting

### Variable Hoisting

Variable declarations are "hoisted" to the top of their scope:

```javascript
function example() {
  console.log(x); // undefined (not ReferenceError)
  var x = 5;
  console.log(x); // 5
}

// Equivalent to:
function example() {
  var x; // Declaration hoisted
  console.log(x); // undefined
  x = 5; // Assignment stays in place
  console.log(x); // 5
}
```

### Function Hoisting

Function declarations are fully hoisted:

```javascript
sayHello(); // Works! "Hello"

function sayHello() {
  console.log('Hello');
}

// But function expressions are NOT hoisted
sayGoodbye(); // TypeError: sayGoodbye is not a function

var sayGoodbye = function () {
  console.log('Goodbye');
};
```

## Common JavaScript Pitfalls

### Global Variables

Undeclared variables become global:

```javascript
function badFunction() {
  x = 10; // Creates global variable!
}

// Always use var, let, or const
function goodFunction() {
  var x = 10; // Local variable
}
```

### Semicolon Insertion

JavaScript automatically inserts semicolons, sometimes incorrectly:

```javascript
// This returns undefined, not the object!
function getObject() {
  return;
  {
    name: 'value';
  }
}

// Correct way
function getObject() {
  return {
    name: 'value',
  };
}
```

### Reserved Words

Some words cannot be used as identifiers:

```javascript
// These will cause errors
var class = "CSS";   // Error
var return = 5;      // Error

// Object properties are safer but still problematic
var obj = {
  class: "CSS"       // Works in ES5+
};
```

### The `typeof` Operator

`typeof` has some quirks:

```javascript
typeof []; // "object" (not "array"!)
typeof null; // "object" (historical bug)
typeof function () {}; // "function"
typeof undefined; // "undefined"

// Use Array.isArray() for arrays
Array.isArray([]); // true
```

### `parseInt()` Issues

Always specify the radix:

```javascript
parseInt('08'); // 0 in older browsers (octal)
parseInt('08', 10); // 8 (always use radix!)
```

### Floating Point Precision

JavaScript uses IEEE 754 floating point:

```javascript
0.1 + 0.2; // 0.30000000000000004 (not 0.3!)

// For currency, use integers (cents)
var cents = 10 + 20; // 30
var dollars = cents / 100; // 0.30
```

### `NaN` (Not a Number)

`NaN` is not equal to itself:

```javascript
NaN === NaN; // false!

// Use isNaN() to check
isNaN(NaN); // true
Number.isNaN(NaN); // true (ES6, more reliable)
```

### The `+` Operator

The `+` operator is overloaded for addition and concatenation:

```javascript
5 + 3; // 8 (addition)
'5' + 3; // "53" (concatenation)
5 + '3'; // "53" (concatenation)

// Be explicit
5 + Number('3'); // 8
String(5) + '3'; // "53"
```

## Type Coercion and Falsy Values

### Falsy Values in JavaScript

These values evaluate to `false` in boolean context:

```javascript
false
0
"" (empty string)
null
undefined
NaN
```

### Truthy Gotchas

Some values are truthy but might surprise you:

```javascript
Boolean([]); // true (empty array)
Boolean({}); // true (empty object)
Boolean('0'); // true (non-empty string)
Boolean('false'); // true (non-empty string)
```

### Using `hasOwnProperty`

Always use `hasOwnProperty` when iterating:

```javascript
var obj = { a: 1, b: 2 };

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}
```

## Objects and Prototypes

### Prototype Inheritance

JavaScript uses prototypal inheritance:

```javascript
var animal = {
  speak: function () {
    console.log('Sound');
  },
};

var dog = Object.create(animal);
dog.speak = function () {
  console.log('Bark');
};

dog.speak(); // "Bark"
```

### `Object.create()` for Inheritance

Prefer `Object.create()` over constructor patterns:

```javascript
// Using Object.create (cleaner)
var parent = {
  greet: function () {
    return 'Hello';
  },
};

var child = Object.create(parent);
child.greet(); // "Hello"
```

## Functions: Statements vs Expressions

### Function Declaration (Statement)

```javascript
// Hoisted - can be called before declaration
sayHello();

function sayHello() {
  console.log('Hello');
}
```

### Function Expression

```javascript
// NOT hoisted - must be defined before use
var sayHello = function () {
  console.log('Hello');
};

sayHello();
```

### Named Function Expression

```javascript
// Useful for recursion and debugging
var factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};
```

## Best Practices

### Avoid These Features

| Feature                         | Why Avoid                       | Alternative             |
| ------------------------------- | ------------------------------- | ----------------------- |
| `with`                          | Ambiguous scope                 | Direct property access  |
| `eval()`                        | Security risk                   | `JSON.parse()`          |
| `==`                            | Type coercion                   | `===` (strict equality) |
| `++`/`--`                       | Can be confusing                | `+= 1` or `-= 1`        |
| Bitwise operators               | Confusing in JS                 | Explicit operations     |
| Typed wrappers (`new String()`) | Creates objects, not primitives | Use literals            |

### Always Do These

1. **Use strict mode**: `"use strict";`
2. **Declare variables**: Always use `var`, `let`, or `const`
3. **Use `===`**: Avoid loose equality
4. **Specify radix**: `parseInt(str, 10)`
5. **Use semicolons**: Don't rely on automatic insertion
6. **Use `hasOwnProperty`**: When iterating with `for-in`

### Code Example: Modern ES5 Pattern

```javascript
'use strict';

var MyModule = (function () {
  // Private variables
  var privateVar = 'secret';

  // Private function
  function privateFunction() {
    return privateVar;
  }

  // Public API
  return {
    publicMethod: function () {
      return privateFunction();
    },
  };
})();

MyModule.publicMethod(); // "secret"
```

## Conclusion

ECMAScript 5 is a capable language, but understanding its quirks is essential for writing reliable code. Key takeaways:

1. **Avoid the "bad parts"**: `with`, `eval`, loose equality
2. **Understand `this`**: Know how function invocation affects `this`
3. **Be explicit**: Use strict equality, specify radix, declare variables
4. **Use strict mode**: Catches common mistakes early
5. **Learn prototypes**: Understand JavaScript's inheritance model

These practices will help you write cleaner, more maintainable JavaScript code.


A comprehensive guide to JavaScript quirks, pitfalls, and best practices based on Douglas Crockford's JavaScript - The Good Parts.

A Memo for ECMAScript 5 - The Good, Bad, and Awful Parts


#### Table of Contents

1. The Angular Javascript Code
2. The HTML

In this blog, I'll create an angular directive to limit the length user can
enter to the input text field. In the following example, the number directive
default is 10, but the value could be overridden by the attribute.

## The Angular Javascript Code

First, following code is based on angular1, the version is
`1.4.8` . The below code all is doing are, setup the angular
module, set up the controller and the scope for the controller so that'll bind
to the HTML later. Next, we'll create directive `numberField` to
the angular app.

```
var app = angular.module('myApp', []);

app.controller("myController", ['$scope', function($scope){

$scope.title = "my app number input";
$scope.mynumber = '';

}]);

app.directive('numberField', function () {
    'use strict';
    var NUMBER = /[^0-9]/g,
        DEFAULT = 10;

    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var lenth = attrs.numberLength || DEFAULT;
            modelCtrl.$parsers.push(function (inputValue) {

                if (inputValue == undefined) return ''
                var transformedInput = inputValue.replace(NUMBER, '');
                if (transformedInput.length <= lenth) {
                    // default number always 10 digits, otherwise looking for number-length attr
                    if (transformedInput != inputValue) {
                        modelCtrl.$setViewValue(transformedInput);
                        modelCtrl.$render();
                    }
                    return transformedInput;
                }

                var newValue = transformedInput.slice(0, -1);
                modelCtrl.$setViewValue(newValue);
                modelCtrl.$render();
                return newValue;
            });
        }
    };
});
```

## The HTML

Once we have the Angular ready, we can use the angular as following. First
setup the app an controller to the HTML element. Then, next put angular
directive `number-field` to the input field. Notice the second
input field has attribute `number-length` as 6, because we use that
at angular code to check the length of the number.

```


  {{title}}



  max length is 10



  max length is 6




```

Now, that's a simple way to create a number input field with a max length
setting. You can also see above code from jsfiddler
here.
Or try the result from following.


A simple angular directive input text only accept number as 10 digits, but also length is configurable at view.

Angular Directive for Check Number Input


#### Table of Contents

1. How to scroll to the location on the page by Angular1
2. The Angular HTML
3. The Angular Javascript

## How to scroll to the location on the page by Angular1

This quick code snippet shows how to use angular1 location hash to go to the
specific section of the page. The framework is using angular1 1.4.8.

### The Angular HTML

Following is the HTML for the angular, if the user click the
**gotoError** link, will move to the
**error-place**location.

```


 0">

            {{error}}



 0">
        Go to the Error


```

### The Angular Javascript

We'll create the angular controller as following, which will handler the click
event when the user click the **gotoError** link. Also, this
controller import Angular1 **$anchorScroll**, when this executed,
it will scrolls to the hash value.

```
var app = angular.module('myApp', []);

app.controller("myController", ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll){

 $scope.errors = [
 "I have more error1 to show!",
 "I have more error2 to show!",
 "I have more error3 to show!",
 "I have more error4 to show!",
 "I have more error5 to show!",
 "I have more error6 to show!",
 "I have more error7 to show!",
 "I have more error8 to show!"
 ];

 $scope.gotoError = function() {
  $location.hash('error-place');
  $anchorScroll();
 }

}]);
```

Now, above is quick sample code of how to use location hash by angular1 way.
You can also check the code at jsfiddler
here.


Example Code - How to Use Angular.js Location Hash


#### Table of Contents

1. Why need something like Prettier to format VS Code?
2. What this article will provide
3. Install prettier package
4. First install the prettier as dev dependencies.
5. Add task script to the scripts section at package.json
6. Add .prettierrc to the root
7. Add .prettierignore to the root project
8. Use VS Code Setting with Prettier to format code when save file
9. Conclusion

### Why need something like `Prettier` to format VS Code?

Code formatter might not as important as `Lint` or `Test`, which these are checking syntax or logic error, if something happen might introduce huge issue, but if you have lots developer working in the same codebase, each one has different style setting, or coding style which could cause the inconsistent style, and again nothing break but if you have consistent style through the entire codebase then you have less thing to worry about right?

### What this article will provide

This article only consider how to use prettier extension at VS code, and provide below steps to make using `prettier` easier.

### Install `prettier` package

#### First install the prettier as dev dependencies.

```cmd
npm install --save-dev prettier
```

#### Add task script to the `scripts` section at `package.json`

After install the prettier and add this script task, this is for something might have some case want to update the entire solution. However, doesn't recommend to put this task as every build or use the husky during the commit or push command to the git, that'll will slow down the development due to search entire codebase and format code take sometime.

```
"scripts": {
    "prettier": "prettier --write ."
}
```

#### Add `.prettierrc` to the root

Add this file for the prettier setting for the current project.

```
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}
```

#### Add `.prettierignore` to the root project

Add this so when run the prettier task so can exclude following folders.

```
.next
dist
node_modules
output
```

### Use VS Code Setting with Prettier to format code when save file

Create a folder `.vscode` and create `settings.json`, at the `settings.json` put the below content. This will use the `prettier` to format the code when try to save the file.

```
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  }
}
```

### Conclusion

This article recommend to use `prettier` to format code, and use `prettier` with vscode extension so every time save the file will format the code, also incase need to run the `prettier` to the entire code base, so add the script task so can run as `npm run prettier`.


Use Prettier to Format VS Code to Enforce Consistent Style


#### Table of Contents

1. Use Gulp, Gulp Plugins and Browserify to build Angular app
2. package.json
3. Angular App
4. index.html
5. gulpfile.js
6. References or Links
7. Conclusion

## Use Gulp, Gulp Plugins and Browserify to build Angular app

This sample app use following technologies.

1. Node.js

2. Angular.js

3. Browserify

4. Gulp

5. gulp-connect

6. gulp-ng-annotate

The files structure will be following, also you can check the sample code
at [Github. After you download the code, run following command should be able to start
your app. The fisrt command will install all the node.js dependecy modules,
and second command will run the gulp task defined at
`gulpfile.js`

```
npm install -d
gulp
```

`App` folder are all the client side file for build angular app.

`Gulpfile` contains all the client side task build.

`Index.html` is the html page will be request by the client, also
contains the angular app.

`package.json` contains all the dependencies for this example.

gulp-test1

app

controllers

controller1.js
controller2.js
controller3.js

views

controller1.html
controller2.html
controller3.html

app.js

gulpfile.js
index.html
package.json

### package.json

The main module here are angular, angular-route and browserify, because
browserify will take care of angular app's dependency that's why need angular
as node module. Also, gulp and gulp's plugin modules, the gulp-np-annotate
will fix the issue when mininize js in angular, gulp-connect will run a test
app.

```
{
  "name": "gulp-test1",
  "version": "1.0.0",
  "description": "gulp-test1",
  "dependencies": {
    "angular": "^1.5.5",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "angular": "^1.5.5",
    "angular-route": "^1.5.5",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^3.2.2",
    "gulp-cssmin": "^0.1.7",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-uglify": "^1.5.3",
    "vinyl-source-stream": "^1.1.0"
  },
  "author": "dake"
}
```

### Angular App

Following is the example code use browserify with angular, broserify will take
all the dependencies for angular. For example, following code is the
`app.js` at angular.js, which define where is the controller and
views, in angualr it is useing `angular-route`, and ofcourse,
app.js is also depend on `angular.js`. In Browserify, it is very
simple to define, you just need to write, `require('angular')`,
browserify will take care the dependency for you. Similar to the angular
controllers, you'll need to define as
`require('./controllers/controller1');`.

```
'use strict';
require('angular');
require('angular-route');
var app = angular.module('gulp.test1', ['ngRoute']);

require('./controllers/controller1');
require('./controllers/controller2');
require('./controllers/controller3');

app.config(function ($routeProvider) {
    $routeProvider
       .when('/', {
        templateUrl: 'views/controller1.html',
        controller: 'controller1',
        controllerAs: 'controller1'
      })
      .when('/1', {
        templateUrl: 'views/controller2.html',
        controller: 'controller2',
        controllerAs: 'controller2'
      })
       .when('/2', {
        templateUrl: 'views/controller3.html',
        controller: 'controller3',
        controllerAs: 'controller3'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
```

```
'use strict';

angular.module('gulp.test1')
  .controller('controller1', function ($scope) {
    $scope.message = 'controller1!';
});
```

```
message: {{message}}
```

#### How do I use browserify to bundle all javascript

This is sample task at gulpfile.js, at end of this task, it will create a
javascript combined all the dependency javascript. In our previous
`app.js`. It shouldn't contains angular.js angular-route.js, all
the angular controllers and the app.js itself.

```
gulp.task('browserify', function () {
    return browserify('./app/app.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/js/'));
});
```

### index.html

In this example, `index.html` is the actual web page, as you can
see it is any reference to the minified javascript.

```
<!doctype html>













      home](https://github.com/keke78ui9/gulp_angular_browserify_sample1)
      [main](/#1)
      [main1](/#2)



```

### gulpfile.js

```
/// setup gulp

var gulp = require('gulp');
var connect = require('gulp-connect');
// requires browserify and vinyl-source-stream
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
//var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");
var ngAnnotate = require('gulp-ng-annotate');

gulp.task('connect', function () {
    connect.server({
        root: 'public',
        port: 4000
    })
});

gulp.task('browserify', function () {
    // Grabs the app.js file
    return browserify('./app/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('app.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});


gulp.task("min:js", function () {

    gulp.src(["./public/js/app.js"], { base: "." })
    .pipe(ngAnnotate())
    .pipe(concat("./public/js/app.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js"]);

// Views task
gulp.task('views', function () {

    // Any other view files from app/views
    gulp.src('./app/views/**/*')
    // Will be put in the dist/views folder
    .pipe(gulp.dest('./public/views/'));
    // copy html to production folder
    gulp.src('./index.html').pipe(gulp.dest('./public/'));
});

gulp.task('watch', function () {
    gulp.watch('app/**/*.js', ['browserify','views']);
});

gulp.task('default', ['browserify', 'views', 'min', 'watch','connect']);
```

### References or Links

1. [gulp's plugins There's thousands of plugins for gulp

browserify](http://gulpjs.com/plugins/) Official
website

2. [angular1 and angular2](https://angularjs.org/)

3. Most popular gulp plugins

### Conclusion

Gulp is very powerful client side task runner, there're many different plugins
you can use, also popular IDE visual studio is also start to use gulp/grunt as
client side task runner to build assets. That means more people will start
using it and create modules for it. Also with browserify it will even become
more powerful, it use node.js to combined all client side resources.


Start Use Gulp and Browserify to Build Angular App with Node.js

#### Table of Contents

1. 1. Grunt file setup
2. Place Javascript/CSS files at Jade template
3. Keystone.js init
4. Conclusion

I'm using keystone.js with Jade view template engine, back-end is MongoDB, I
didn't try Grunt at Keystone.js before, this blog is How I tried, it's not
perfect but the output is close to what I want. So anyway, from browser source
code point of view, following is what I want.

  - Minify CSS/Javascript

  - Minify Html

  - In Development mode, I should have choice to not minify CSS/Javascrout, not
minify HTML.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_2lahel4pj.png)

So following are list of things how I tried to make it happen.

### 1. Grunt file setup

```
Use grunt-jade-usemin
```

First thing I'm doing here is use jadeUsemin setup task for jade template.
Then, there are some clean up so I can make my web application work, which is
copy task.

```
/*
 * grunt-jade-usemin
 *
 *
 * Copyright &copy;2014 Gilad Peleg
 * Licensed under the MIT license.
 */
'use strict';

module.exports = function (grunt) {
    // load all npm grunt tasks
    require('load-grunt-tasks')(grunt);
    // Project configuration.
    grunt.initConfig({
        // Before generating any new files, remove any previously-created files.
        clean: {
            tests: ['tmp', 'test/compiled']
        },
        filerev: {
            jadeUsemin: {
                options: {
                    noDest: true
                }
            }
        },
        // Configuration to be run (and then tested).
        jadeUsemin: {
            options: {
                replacePath: {
                    '#{baseDir}': 'test', //optional - key value to replace in src path
                    '#{baseDistPath}': '/'
                }
            },
            basic: {
                options: {
                    tasks: {
                        js: ['concat', 'uglify'],
                        css: ['concat', 'cssmin']
                    }
                },
                files: [
                    {
                        dest: 'templates/compiled/layouts/default.jade',
                        src: 'templates/layouts/default.jade'
                    }]
            }
        },
        copy: {
            // copy UI assets for development
            development: {
                cwd: 'public',
                src: '**/*',
                dest: 'public/public',
                expand: true
            },
            production: {
                cwd: '/dist',
                src: '**/*',
                dest: 'public/dist',
                expand: true
            },
            production_fonts: {
                cwd: 'public/fonts',
                src: '**/*',
                dest: 'public/dist/fonts',
                expand: true
            },
            production_fontsAwesome: {
                cwd: 'bower_components/font-awesome-bower/fonts',
                src: '**/*',
                dest: 'public/dist/fonts',
                expand: true
            }
        }
    });
    // Actually load this plugin's task(s).
    grunt.loadTasks('tasks');
    // Whenever the "test" task is run, first clean the "tmp" dir, then run this
    // plugin's task(s), then test the result.
    grunt.registerTask('[production]', [
        'jadeUsemin:basic',
        'copy:development',
        'copy:production',
        'copy:production_fonts',
        'copy:production_fontsAwesome'
    ]);
};
```

### Place Javascript/CSS files at Jade template

Next thing to do is, add html comment as following for your javascript or CSS,
the file path after the `build:js`will be the actual file path when
run the Grunt task.

There're some trick here, when I wrote the path start with slush
`/`, grunt task will create this `post.js`to my local
drive's root folder. If i didn't add the sluch then will create the file under
my current application's root folder. That's why I'm doing cheat here at my
copy task command. Something i think I need to figure out the better way to do
it.

```
block js
	script(src='https://apis.google.com/js/platform.js', async='', defer='')

	//-
	script(src='./public/js/shared/socials/facebook_sdk.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_core.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_facebook2.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_googlePlus.js', type='text/javascript')
	//-
```

### Keystone.js init

I copy all the jade template to another folder at Grunt task, because of this
I need ability at keystone.js when in development/production use different
view template.

Following is what I did at keystone.js

```
var viewPath = 'templates/compiled/views';
if (process.env.NODE_ENV === 'development') {
	viewPath = 'templates/views';
}
keystone.init({
	'views':  viewPath,
....
});
```

### Conclusion

I'm happy that at Keystone.js I'm able to achieve following thing by using
grunt task, on Production you'll get most optimized enviroment.

  - Minify CSS

  - Minify Javascript

  - Minify HTML

  - Ability to swich minify on/off in Development

There are list of thing I don't think I'm doing it right, so need to figure
out in the future.

  - How to setup path at jade template

How to Use Grunt to setup task at Keystone.js for minify CSS, Javascript, HTML

How to Use Grunt with Keystone.js for Minify CSS, Javascript and HTML


#### Table of Contents

1. 1. Use Default Facebook Share button
2. Facebook SDK + custom Js module for facebook share
3. The Html
4. Buttons looks like following
5. Meta Tag
6. Conclusions
7. 2. Facebook share - Control the UI
8. Conclusions
9. 2. Facebook Feed Dialog
10. Following is the result view.
11. Conclusion
12. More to come

[Share Example 1
Share Example 2](#)

Nowaday, lots of website are using facebook share module, this blog will show
few ways of how to implement facebook share, they can use by different scenrio
and level of web skill.

## 1. Use Default Facebook Share button

Following is few things you need to do for use the default facebook share
button.

Go to [Facebook Share Developer Page, check the code, but following is the example how I'm doing it.

### Facebook SDK + custom Js module for facebook share

You need Facebook SDK for facebook share, without this the share won't work,
you cn get this javascript from facebook developer page.

The second thing i'm doing here, depend on my page add current page's url to
the html, so when share the page, facebook share would know you shared which
page.

```
/*
 * Javascript SDK from Facebook.
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * facebook shared
 * html
 *
 */
var dhe = dhe || {};
dhe.fb_share = (function () {
    var fbData = document.querySelector('.fb-share-button');
    fbData.dataset.href = window.location.pathname;
    return {};
})();
```

### The Html

```](https://developers.facebook.com/docs/plugins/share-button)
```

### Buttons looks like following

![](http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/vmqjxbe03pi82cjlu1qg.png)

### Meta Tag

This meta tag is also important, because when you use default facebook share,
the share window will use following information to display, such as image,
description, title.

```








```

### Conclusions

I think this default facebook share is good for starter, easy to implement the
share feature. However it is less flexbility. If you have multi share at the
same page, they all going to use same picture, title. Also, it is hard to
change the style.

## 2. Facebook share - Control the UI

The following solution is more flexible, because you have totally control the
UI looks, also you can get how many total shared from the specific page, use
the total shared to control the UI as well. Now, following are steps how you
do it.

First, Let me show how's the result looks first, follwing is using the
FontAwesome icon.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_3reqj4osr.png)

Sounds like you have full control of the facebook share, however you're depend
on following two api. First one, graph.facebook, you can get the total share
and comments from the api by passing your page. Second url provide facebook
share feature by passing defined parameter, such as
u
is the actual url of your page. Also, it'll depend on your Metatag. You
still depend on these two url, and it's hard to find how many parameter
they support, because document is poor.

```
http://graph.facebook.com/
https://www.facebook.com/sharer/sharer.php?u={encoded url}&t={title, seperate by + }
```

Following are the code i did at javascript.

Following facebook share could do the same facebook share feature, also you
could get the count of the share for the page.

```
/*
 * Javascript SDK from Facebook.
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&title=test";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * My own customized js code
 */
var dhe = dhe || {};
dhe.fb_share = (function () {
    function openPopup(url) {
        window.open(url, "myWindow", "status = 1, height = 500, width = 500, resizable = 0")
    }

    function loadFBCount(url) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                //{
                //    "id": "http://news.ycombinator.com",
                //    "shares": 8868,
                //    "comments": 3
                //}
                return JSON.parse(xhttp.responseText);
            }
        };
        xhttp.open("GET", "http://graph.facebook.com/" + url, true);
        xhttp.send();
    }

    function init(){
        updateShare();
        var fbCount = loadFBCount(window.location.href);
        // update fb count to UI;
    }

    function updateShare(){
        var fbData = document.querySelector('.fb_share');
        var url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href);
        fbData.href = "javascript:dhe.fb_share.openPopup('" + url + "')";
    }

    init();

    return {
        openPopup : openPopup
    };
})();
```

Html is as following, instead of font-awesome's icon, you could change to
image or other resource.

```
[* *]()
```

### Conclusions

Doing this way, you have full control of UI which how facebook should looks
like, and able to get the total share. However it is still hard to control the
shared window's content. Good things is, you don't need Facebook development
account, for both above solution you can just copy javascript, copy html and
you're done.

## 2. Facebook Feed Dialog

Facebook feed dialog is more flexiable compare to the first two, first you
need to go to [facebook developer to register and get app_id.

Once you got app_id you can start to use, following is how I'm doing.

### Following is the result view.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_35d4uy5dr.png)

#### Facebook SDK and APP init

```
/*
 * facebook SDK
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * facebook APP init
 */
window.fbAsyncInit = function () {
    FB.init({
        appId      : 'your facebook app id',
        xfbml      : true,
        version    : 'v2.5'
    });
};
```

####
Following javascript, basically I'm bind the click event, and also provide
method to get share url's total count.

```
/*
 * Use facebook.com/sharer/sharer.php and graph.facebook.com/
 */
var dhe = dhe || {};
dhe.fb_share2 = (function () {
    /*
     *
     * return following type of json object.
    * {
    *     "id": "http://news.ycombinator.com",
    *     "shares": 8868,
    *     "comments": 3
    * }
     */
    function loadFBCount(url, updateCallBack) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                updateCallBack(JSON.parse(xhttp.responseText));
            }
        };
        xhttp.open("GET", "http://graph.facebook.com/" + url, true);
        xhttp.send();
    }

    /*
     * update fb fshare count to UI
     */
    function updateCount(fbCount) {
        var fbShare = document.querySelector(".soc_count.fb");
        if (fbShare) {
            fbShare.innerHTML = fbCount.shares;
        }
    }

    /*
     * get current url, remove the hash or querystring
     */
    function GetCurrentUrl(){
        var _location = window.location;
        return _location.origin + _location.pathname;
    }

    /*
     * bind click event for facebook share
     * load facebook total count
     */
    function init() {
        var all = document.querySelectorAll(".dhe_fb_share");
        for (var i = 0; i < all.length; i++) {
            all[i].onclick = fbShareEvent;
        };

        loadFBCount(encodeURIComponent(GetCurrentUrl()), updateCount);
    }

    /*
     * get meta tag
     */
    function getMetaTag(tagName){
        var metas = document.getElementsByTagName('meta');
        for (i = 0; i < metas.length; i++) {
            if (metas[i].getAttribute("property") == tagName) {
                return metas[i].getAttribute("content");
            }
        }
    }

    /*
     * facebook share event
     */
    function fbShareEvent(e){
        var _this = this;
        var data = {};
        data["app_id"] = "Your Facebook APPID";

        data["method"] = "feed";
        data["href"] = _this.dataset.href ? encodeURIComponent(_this.dataset.href) : encodeURIComponent(GetCurrentUrl());
        data["caption"] = (_this.dataset.caption) ? _this.dataset.caption : getMetaTag("og:title");
        data["name"] = (_this.dataset.name) ? _this.dataset.name : getMetaTag("og:type");
        data["description"] = (_this.dataset.description) ? _this.dataset.description : getMetaTag("og:description");
        data["picture"] = (_this.dataset.picture) ? _this.dataset.picture : getMetaTag("og:image");
        if (_this.dataset.redirect_uri) {
            data["redirect_uri"] = _this.dataset.redirect_uri;
        }
        console.info(data);
        FB.ui(data, function (response) {
            console.info(response);
        });
    }

    init();

    return {
        loadFBCount : loadFBCount
    };
})();
```

#### HTML - following is example html

The way I'm trying to build is, following is minimal require fields, if html
doesn't provide any value, default will go to meta tag to get the one. If you
provide from html then will get from the html when click share.

```](https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5)


```

That says, if you define following at your html that would be show to the
share window too.

```
[](#)
[](#)[](#)
```

### Conclusion

If you're less knowledge of Javascript, you can try #1 to add facebook share,
and if know javascript and the page you need facebook doesn't require much
flexibility, you can use #2, but if your webpage need more than one facebook
share, you can try #3.

### More to come

  - facebook develper - facebook developer page is giant area contains lots of products,
I'll try some of them and will write blog here.

  - facebook debug tools


This blog show how to use facebook share in 3 ways. Contains code snippet in HTML, Javascript.

How to add Facebook Share Button to the Page


#### Table of Contents

1. Gigya comment module written in jade
2. Gigya comment module written in javascript
3. Gigya shared module written in jade
4. Gigya shared module written in javascript

Gigya provides social share feature, include facebook, google plus's share,
comment and tons of other features to engage your website and the user.

http://www.gigya.com/products/add-ons/social-engagement/

This blog shows very simple way to imprement this, first you need to go to
gigya.com to register and get a account.

Once you get a account, following is simple code written by jade to add
comment area.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_h0fq3t53b.png)

### Gigya comment module written in jade

```
.container
		#commentsArea
	script(type='text/javascript').
		var params ={
		categoryID: 'technology',
		streamID: window.location.pathname,
		version: 2,
		containerID: 'commentsArea',
		cid:'',
		enabledShareProviders: 'facebook,twitter,yahoo,linkedin,googleplus'
		}
		gigya.comments.showCommentsUI(params);
```

### Gigya comment module written in javascript

```




      var params ={
      categoryID: 'technology',
      streamID: window.location.pathname,
      version: 2,
      containerID: 'commentsArea',
      cid:'',
      enabledShareProviders: 'facebook,twitter,yahoo,linkedin,googleplus'
      }
      gigya.comments.showCommentsUI(params);



```

### Gigya shared module written in jade

```
script(type='text/javascript').
		var act = new gigya.socialize.UserAction();
		var thisUrl = window.location.href;
		var imageSrc = $("img.img-responsive")[0] || '';
		act.setTitle($("header h1").text());
		act.setLinkBack(thisUrl);
		act.addMediaItem({ type: 'image', src: imageSrc, href: thisUrl });
		var showShareBarUI_params=
		{
		containerID: 'shareDiv',
		shareButtons: 'Facebook-Like,Twitter-Tweet,googleplus-share,LinkedIn',
		userAction: act
		}
	script(type='text/javascript').
		gigya.socialize.showShareBarUI(showShareBarUI_params);
```

### Gigya shared module written in javascript

```

      var act = new gigya.socialize.UserAction();
      var thisUrl = window.location.href;
      var imageSrc = $("img.img-responsive")[0] || '';
      act.setTitle($("header h1").text());
      act.setLinkBack(thisUrl);
      act.addMediaItem({ type: 'image', src: imageSrc, href: thisUrl });
      var showShareBarUI_params=
      {
      containerID: 'shareDiv',
      shareButtons: 'Facebook-Like,Twitter-Tweet,googleplus-share,LinkedIn',
      userAction: act
      }

    gigya.socialize.showShareBarUI(showShareBarUI_params);


```

Reference

gigya documents


How to Use gigya to Share and Comments


#### Table of Contents

1. Javascript render in the browser
2. inline scripts
3. external scripts
4. deferred scripts
5. event driven scripts
6. dynamically loaded scripts
7. With
8. [Javascript module patterns](#)
9. List of pattern of using module design patterns
10. Inheritance by using module pattern
11. sub module or module pattern with namespace
12. [New line at end of Javascript file](#)
13. [.jshintrc ](#)
14. [Global](#)
15. [Strict mode](#)
16. [for](#)
17. [javascript shortHand](#)
18. [jQuery](#)
19. [Types](#)
20. [Objects](#)
21. [Arrarys](#)
22. [Declares](#)
23. [Javasscript ShortCut](#)
24. [Declare Functions](#)
25. [Semicolons](#)
26. [Name conventions](#)
27. [Reserved Words](#)
28. [HttpGet](#)
29. [HttpPost](#)

Following is about javascript ECMAScript 5.

### Javascript render in the browser

It should be good that use external scripts by default and sometime inline
scripts. Should avoid use event driven scripts or dynamically loaded scripts.

#### inline scripts

Some time we write inline script.

```

var inline = function(){
return "hi";
};

```

#### external scripts

But we should try to move all javascript as external js file.

```


```

#### deferred scripts

You might want to load javascript as delay which after page load.

```


```

#### event driven scripts

We should avoid use like this.

```
sample


```

#### dynamically loaded scripts

Also, should avoid load js like this too.

```
var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'helper.js';
   head.appendChild(script);
```

### With

Should avoid use `With`, see
[MDN - With

```
//example use
//not good
with (document.head.style)
{
cssText = "test";
alignContent = "testContent";
}

// good
var headStyle = document.head.style;
headStyle.cssText = "test";
headStyle.alignContent = "testContent";
```

### [Javascript module patterns](#)

##### Pattern #1 - revealing module pattern

I like this, because you'll get namespace of javascript, avoid global scope.
Also, you will get encapsulation. In additional, I changed the minification
for js that anything between START-UNITEST and END-UNITTEST will remove from
javascript file. But when you reference it from your unit test file, you can
call the method for your testing. The most important to me are, easy to see
what's private, public, where's the function and variables.

```

// anonymous express function, which will execute immediately and any method inside this scope will contains privacy as closure.
var yourModule = (function($, _otherJs) {
var _private1 = function(){
return "hi";
};

var _private2 = function(number) {
return number * 10;
};

var _importantPrivate = function() {
// Doing crazy, important stuff.
};

// return module as public interface
return {
// START-UNITTEST
TEST1 : _importantPrivate,
// END-UNITTEST
calc1 : _private2,
get : _private1
};
// here you define what dependency module used at here
})(jQuery, otherJs);
```

#### List of pattern of using module design patterns

```
// Good
var myModule = (function(){

var _private = function(){
};

return {
 public : _private
};
})();
```

```
// Good
var myModule = (function(){

var _myModule = {};

var _private = function(){
};

_myModule.public = _private;

return _myModule;

})();
```

```
// Good
var myModule = (function(_myModule){

var _private = function(){
};

_myModule.public = _private;

return _myModule;

})(myModule);

or
// Good
(function(_myModule){

var _private = function(){
};

_myModule.public = _private;

return _myModule;

})(myModule);

or
// Good
var module = (function(_myModule){

var _private = function(){
};

_myModule.public = _private;

return _myModule;

})(module || {});
```

Following code is return everything at the end, it's hard to see the code and
change or modulize the functions. I don't like doing in this way.

```
// Not good
(function() {
var _private = function() {
};

return {
public: function() {
 return "some logic";
},
public2 : function() {
 return "hi";
},
public 3 : function () {
},
// keep going with lots of more public method
}

})();
```

#### Inheritance by using module pattern

```
var firstModule = (function(){

var _private = function() {
return "hi";
};

return {
public : _private
};
})();

var overrideFirst = (function(_firstModule) {

var myOverrided = _firstModule;
myOverided.public = function() {
return "hello";
};

return myOverrided;
})(firstModule);
```

#### sub module or module pattern with namespace

I think this should be good for big organization to use as module patterns

```
// module.js
var module = (function()){
return {
};
})();

// module.child.js
module.child = (function()) {
return {};
})();

// module.child.son.js
module.child.son = (function()) {
return {};
})();

// module.child2.js
module.child2 = (function()) {
return {};
})();
```

### [New line at end of Javascript file](#)

###
New Line Necessary

General reason is like following comment without new line, your javascript
will break. But I think lots of bundling & minification library already
handler this case. I wonder if there're any other case should use new Line.

```
asfda = "asdf"; // comment function method() {
```

### [.jshintrc ](#)

### [Global](#)

avoid define as global in Javascript.

To avoid, i'm trying to use module pattern and closures.

```
// not good
// what's issue? so person A defined call() and will return 1000.
function call(){
// some work
return 1000;
}

// after load above script, let's assume your page load following script which use the same method name.
function call(){
// some work
return true;
}

// and this will return true.
call();
```

However, there're many ways.

```
// not good
// although you can define as namespace, but will be huge list and hard to see the code.
// and everything are accessiable.
var myModule = {
method1: function(){
return 1000;
},
method2: function(){
return true;
}
}

// not good
// this is use Revealing Module Pattern wich i use a lot and like it, but I don't like it return all the function at the end. It will end up hard to see at the last part and hard to differenitate what are public and private what could be move to shared location.
var myModule = function() {
var _private = {};
var _privateMethod = function(){
};

return {
   publicMethod : function(){
    return 1000;
   },
   publicMethod2 : function(){
    return true;
   }
}

}();

// good
var myModule = function($, otherSvc){
"use strict";
var _privateMethod = function(){
return 1000;
};

var _privateMethod2 = function(){
return true;
}

return {
public1 : _privateMethod,
public2 : _privateMethod2
};

}(jQuery, otherService);

// will return 1000;
console.info(myModule.public1);
```

### [Strict mode](#)

Strict mode will check certain syntax error in javascript. I'll try to put the
`"use strict"` first line of the
module.

```
var myModule = function(){
"use strict";
var _privateMethod = function(){
return 1000;
};


return {
public1 : _privateMethod
};

}();
```

For more information about strict mode in javascript, you can reference
following links.

mozilla - strict mode

w3c school - strict mode

http://cjihrig.com/blog/javascripts-strict-mode-and-why-you-should-use-it/

### [for](#)

##### Foreach for arrary

```
array.forEach(function(item, i){

});


```

##### // one way

```
var list = [];
for (var i=0;i 1000);
```

### [javascript shortHand](#)

```
 // before
var test;
if (condition) {
 test = true;
}
else {
 test = false;
}

// after
var test = (codition);

// before
// check Null, Undefined, Empty
var myStr2;
if (myStr !== null || myStr !== undefined || myStr !== '') {
myStr2 = myStr;
}

// after
var myStr2 = myStr || '';

// or
// before
```

```
if (myStr !== null || myStr !== undefined || myStr !== '') {
// do work
}

// after
if (myStr || '') {
// do work
}

// object arrary notation
// before, very old school way
var myArrary = new Arrary();
myArrary[0] = "1";
myArrary[1] = "a";

// after
var myArrary = ["1", "a"];

// or nother
var myArrary = new Arrary();
myArrary['test'] = "a";
myArrary['test1'] = "b";

// after
var myArrary = {
'test' : "a",
'test1' : "b"
}

// declare variable
// before
var a;
var b;
var c;

// after
var a,b, c;

// before
for (var i = 0; i < list.length; i++) {
}

// after
for (var i in list) {
}

// before
// get string's char
"string".charAt(0);

// after
"string"[0];

// short function calling
// before
if (condition) {
c_true();
}
else {
c_false();
}

// after
((condition) ? c_true : c_false)();

// switch statement
// before
switch (condition) {
case a:
 doA();
 break;
case b:
 doB();
 break;

}

// after
var switchCase = {
a: doA,
b: doB
};

if (switchCase[parameter]) {
  switchCase[parameter]();
}

// zero number
// before
var x = 10000000;

// after
var x = 1e7;
```

### [jQuery](#)

```
// prefix with $
// not good
var name = $(".name");

// good
var $name = $(".name");

// cache jquery object, why? access DOM element is expensive
// not good
$(".name").hide();
$(".name").show();

// good
$name = $(".name");
$name.hide();
$name.show();
```

### [Types](#)

String
Number
Boolean
Arrary
Object
Undefined

Other - NaN is not a number, when you do "af" - "afs" will return NaN;
Undefined type is Undefined; empty string "" is string type; null is Object
type.

### [Objects](#)

use `{}`following to create object.

```
// not good
var objectVar = new Object();
// good
var objectVar = {};
```

### [Arrarys](#)

Use following syntax when deal with arrary.

```
// Use push to add value to arrary
var someList = [];
someList.push("hi");
someList.push("hello");
// console.info(someList); display -> ["hi", "hello"]
```

### [Declares](#)

```
// better
// this way faster to load javascript, save few keystrokes, 'one'// var so better to read.
var myString = "",
myNumber = 0,
myArrary = [],
myObject = {},
myRegex =  /()/,
myFunction = function(){};

// or
var myString,
myNumber = 100;
myString = true;

// or
var myStr1 = "",
myNum = 0,
myDate;

// not good
var mystr1 = "";
var myStr2 = "";
var myNum1 = 0;
var myDate;
```

### [Javasscript ShortCut](#)

```
// not good
var name = "";
if (name !== '')
{

}

// good
if (name)
{}

// not good
if (name.length > 0){
}

// good
if (name.length)
{
}
```

### [Declare Functions](#)

```
// named function declaration
function testFunc(para1, para2) {
}

// call function
testFunc("test", "asfd");

// named function with call back
function testFunc(para1, callback) {
callback(para1);
}

// call function
testFunc("tefa", function(para1) {
}

// anonymous function expression
var test = function() {
return true;
}

// named function expression
var test = function test() {
retu
}
```

### [Semicolons](#)

```
// safety, in case two self-invoking function have no semicolons.
;(function() {
// some logic.
})();
```

However, I'm still not sure should I use `!` or `;` to
define module function.

```
!(function() {
'use strict';
// some logic.
})();
```

### [Name conventions](#)

```
// private property us underscore
this._name = "name";

// define private this use underscore
var _this = this;
```

### [Reserved Words](#)

Don't use reserved words, see
Javascript Reserved words

### [HttpGet](#)

##### Http Get - JSON Response

```
var request = new XMLHttpRequest();
request.open('GET', '/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // http status code not 200 and 300.
  }

  // more standard see -> https://xhr.spec.whatwg.org/
request.onerror = function() {
 };

request.send();
```

##### Http Get - Request

```
var request = new XMLHttpRequest();
request.open('GET', '/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = request.responseText;
  } else {
   // http status code not 200 and 300.
  }
};

// more standard see -> https://xhr.spec.whatwg.org/
request.onerror = function() {

};

request.send();
```

More info about
XMLHttpRequest

### [HttpPost](#)

```
var request = new XMLHttpRequest();
request.open('POST', '/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
```

###### References for Javascript - Reading

JavaScript Patterns

JavaScript Application Design: A Build First Approach

You don't need jQuery

Airbnb JavaScript Style Guide

all Http Status Code Definition

All Http Method Definitions

JSHint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)

[JSLint](http://www.jslint.com/)

[JSPerf](http://jsperf.com/)
JavaScript performance playground

Annotated ES5

JavascriptJavascript

Mozilla - Javascript

Javascript es5 - Compatibility table

JS: The Right Way

google Javascript Style Guide

Javascript Standard

Javascript idiomaticPrinciples of Writing Consistent, Idiomatic JavaScript

ECMAScript5 Official Document (PDF)

###### References for Javascript - Reading

  - EditorConfig maintain consistent coding styles

confusing, bugs


Everything about Javascript ECMAScript 5.

About Javascript Best Practices, ECMAScript 5


## This blog shows how to use prism to hightlight your code.

Prism is a syntax highlighter for your program languages with web.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_7d5woh95d.png)

Go to the download page, choose the style, support languages you want to use,
then download the css and javascript.

1. put the css and javascript to your site.

```


```

2. add the code with `pre, code` tag

the way prism add style for specific language is you add the language specific
class to the code tag as following example.

p {color: red}

Following are list of the example language prism support so far, I'm using
javascript, css, html, asp.net C# a lot. So I would put the class like
following at my code tag class. language-css, language-javascript,
language-aspnet, language-csharp, language-jade.

basic usage about prism

![](https://d1p0mp3f1fx0hz.cloudfront.net/_ejxecs7f4.png)

Prism support lots of modern program language, you could choose the language
you want to support so able to minimal your file size. Also, easy to use by
just adding the specific language's class to the code tag. I would highly
recommand this javascript library for syntaxhigh your code.


Prism is very nice javascript, css library for syntaxhight your code.

How to Hightlight Code Block by Use Prism


#### Table of Contents

1. Install packages
2. Create AngularJS app module
3. Create AngularJS controller
4. Write Javascript Unittest
5. Get Chutzpah Test Adapter

The following blog shows how to run the AngularJS unit test just like how you
run C# unit test, so basically, you'll run your AngularJS at the visual studio
test explorer window.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_y17k78x5n.png)

## Install packages

You'll need to install the following two packages,
`AngularJS.Core` and `JasmineTest`.

```
install-package AngularJS.Core
```

```
install-package JasmineTest
```

## Create AngularJS app module

```
var app = angular.module('app', []);
```

## Create AngularJS controller

Just create a simple controller with score.test is test.

```
app.controller('myController', function ($scope) {
    $scope.test = 'test';
});
```

## Write Javascript Unittest

Following this, we'll create a Javascript unit test code by Jasmine.

```
///
describe('testAngular ', function () {
    //initialize Angular
    beforeEach(module('app'));
    var scope;
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        var ctrl = $controller('myController', { $scope: scope });
    }));

    it('test scope is test', function () {
        expect(scope.test).toBe('test');
    });
});
```

## Get Chutzpah Test Adapter

Chutzpah Test Adapter for the Test Explorer

Once you install Chutzpah you can just run the unit tests like C# unit tests.


Enable javascript unit test at Visual Studio Test Explorer window

Javascript Unit Test With Jasmine, Angular and Chutzpah with Visual Studio


<div id="test"></div>

```

    #test { white-space: pre; font-family: monospace; }


    var qobj = @Html.Raw(JsonConvert.SerializeObject(Model.SomeKindOfObject));
    document.getElementById("test").innerHTML = JSON.stringify(qobj, null, 4);

```


Code Snippet - Sample Code for Beautify Json


Was curious and although I think I kind of know the result but just want to do
a check what's default javascript behavior to load the method.
Should I
always put the method to the beginning of the script or end of the script.

Looks
like I can't put the end of the script, javascript will return error says,
function is not defined.

```
script
        var beginningOfInlineJs = function () {
            console.info("beginningOfInlineJs");
        };


        (function () {
            var myVariable = "my_private_stuff";
            var privateMethod = function () {
                console.info("hi");
            }

            var privateMethod2 = function (msg) {
                console.info(msg);
                return myVariable + msg;
            };

            var init = function(){
                privateMethod();
                beginningOfInlineJs();
                endOfInlineJs();
            };

            init();
            return {
                public1: privateMethod,
                public2: privateMethod2

            };


        })();

        var endOfInlineJs = function () {
            console.info("endOfInlineJs");
        };

///script
```


Was curious and although I think I kind of know the result just want to do a check what's default javascript behavior to load themethod. Should I always put the method to the beginning of the script or the end of the script.

Javascript default behavior of load method


1. [24 JavaScript Best Practices for Beginners

Javascript BEST PRACTICES PART 1

45 Useful JavaScript Tips, Tricks and Best Practices

best-practices

JavaScript best practices(w3c)

JavaScript Best Practices(code project)

JavaScript Best Practices(w3schools)

JavaScript Best Practices

JavaScript The Right Way

jQuery and JavaScript Coding: Examples and Best Practices

Top 10 &ldquo;Must Follow&rdquo; JavaScript Best Practices](http://code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399)

2. JavaScript best practices


Few collections about best practices of JavaScript.

Category JavaScript